<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
        <el-breadcrumb-item>组装单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主内容区 -->
    <div class="together-content">

      <!-- 搜索表单 -->
      <div class="search-form">
        <el-form :inline="true" label-width="60px" style="width: 100%">
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="单据号/备注"
              clearable
            />
          </el-form-item>

          <!-- 时间范围选择 -->
          <el-form-item label="日期：">
            <el-date-picker v-model="searchForm.dateRange" type="datetimerange" range-separator="-"
              start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" style="width: 340px" clearable />
          </el-form-item>

          <!-- 业务人员 -->
          <el-form-item label="业务人员：">
            <el-select style="width: 200px" v-model="searchForm.staffId">
              <el-option label="请选择" value="" />
              <el-option label="仓库-小衣" value="S1001" />
              <el-option label="仓库-小三" value="S1003" />
              <el-option label="仓库-小五" value="S1005" />
              <el-option label="仓库-小七" value="S1007" />
              <el-option label="仓库-小九" value="S1009" />
            </el-select>
          </el-form-item><br/><br/>

          <!-- 状态 -->
          <el-form-item label="状态：">
            <el-select style="width: 200px" v-model="searchForm.status">
              <el-option label="所有" :value="-1" />
              <el-option label="已打回" :value="0" />
              <el-option label="已创建" :value="1" />
              <el-option label="已提交" :value="2" />
              <el-option label="已审核" :value="3" />
            </el-select>
          </el-form-item>

          <!-- 查询按钮 -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div style="margin-bottom: 15px; text-align: right;">
        <el-button type="primary" @click="router.push({name: 'editMerge'})">新增</el-button>
        <el-button type="success" @click="openAddDialog">审核</el-button>
        <el-button type="danger" @click="openAddDialog">删除</el-button>
      </div>


      <el-table :data="mergeList" style="width: 100%" border>
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column prop="code" label="组装单号" width="180" align="center" />
        <el-table-column prop="createdTime" label="组装日期" width="160" align="center"/>
        <el-table-column prop="staffName" label="创建人" width="180" align="center" />
        <el-table-column prop="auditorName" label="审核人" width="180" align="center" />
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template #default="scope">
            {{showStatus(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column prop="mergeCost" label="组装费用" width="180" align="center" />
        <el-table-column prop="printNumber" label="打印次数" width="180" align="center" />
        <el-table-column fixed="right" label="操作" min-width="180" align="center">
          <template #default="scope">
            <el-button link type="warning" size="small" @click="router.push({name: 'editMerge', params: {id: scope.row.id}})">
              编辑
            </el-button>
            <el-button link type="danger" size="small" @click="deleteRow(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 20px; text-align: center;">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          layout="total, ->, prev, pager, next, jumper"
          background
        />
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, inject, onMounted} from 'vue'
// import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
import router from '@/router';
let searchForm = ref({
  keyword: '',
  dateRange: [], 
  staffId: '',
});
let axios = inject('axios')
let pageNum = ref(1), pageSize = ref(5);
let pageInfo = ref(null);
let loading = ref(false);
let mergeList = ref(null);

const onSubmit = () => {
  if (loading.value) return;
  loading.value = true;

  axios.post('/xyy/merge/page', {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    // companyCode: company,
    //搜索表单中的信息
    keyword: searchForm.value.keyword,
    beginTime: searchForm.value.dateRange == null ? null : searchForm.value.dateRange[0],
    endTime: searchForm.value.dateRange == null ? null : searchForm.value.dateRange[1],
    staffId: searchForm.value.staffId,
    status: searchForm.value.status == -1 ? null :  searchForm.value.status
  }).then(rs => {
    pageInfo.value = rs.data.pageInfo;
    mergeList.value = rs.data.pageInfo.list;
  }).finally(() => {
    loading.value = false;
  })
}

const showStatus = (status) => {
  let res = '';
  switch (status) {
    case 0: res = "已打回"; break;
    case 1: res = "已创建"; break;
    case 2: res = "已提交"; break;
    case 3: res = "已审核"; break;
  }
  return res;
}

onMounted(() => {
  onSubmit();
})



</script>

<style scoped>
.container {
  padding: 20px;
}

.topNav {
  margin-bottom: 20px;
}

.assembly-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.form-header {
  margin-bottom: 25px;
}

.product-info {
  margin-bottom: 25px;
}

.el-descriptions {
  margin-bottom: 15px;
}

.el-descriptions__label {
  font-weight: bold;
  width: 120px;
}
</style>